<!--配送商端-销售管理-批发销售订单列表-->
<template>
  <div class="sale-list">
    <el-container class="container-box">
      <div class="tabs-box">
        <tabs
          :tabs-arr="tabArr"
          @returnIndex="handleTabChange" />
      </div>
      <!-- 搜索查询 -->
      <el-header
        height="auto"
        class="header-search">
        <SearchForm
          show-collapse
          :data="wholesaleOrderSearchForm"
          ref="wholesaleOrderSearchForm"
          :compact-data="compactSearchForm"
          @searchForm="searchForm"
          @resetForm="resetForm"
          :submit-loading='submitLoading'
        >
          <el-button
            class="submit"
            type="primary"
            slot="handle"
            :disabled="!totalElements"
            @click="exportExcelButton('exportExcel')"
            :loading="exportLoading"
          >导出表格</el-button>
        </SearchForm>
      </el-header>
      <!-- 列表模块 -->
      <el-editable
        v-loading="tableLoading"
        :data="wholesaleOrderList"
        height="400px"
        :custom-attr="$TABLE_HEAD['beforeSettle.distributorSide.salesManagement.wholesaleOrder']"
        :columns="wholesaleOrderColumns"
        @selection-change="handleSelectionChange"
      >
        <!-- 操作列 -->
        <template
          slot="default-action"
          slot-scope="{row}">
          <!-- v-if="row.orderStatus === 2 || row.orderStatus === 3" -->
          <el-button
            size="small"
            @click.stop="goDeliverGoods(row)"
            v-if="row.orderStatus === 2 || row.orderStatus === 3"
            type="text text-primary">发货</el-button>
          <el-button
            v-if="row.orderStatus === 1"
            type="text"
            @click="goResponse(row)">
            响应
          </el-button>
          <el-button
            @click="acceptAgain(row)"
            type="text"
            v-if="row.orderStatus === 7">再次接收</el-button>
          <el-button
            size="small"
            @click.stop="jumpDetailPage(row)"
            type="text text-primary">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />
    </el-container>
  </div>
</template>

<script>
import ElEditable from '@components/el-editable/index.vue'
import SearchForm from '@components/businesscomponents/search'
import tabs from '@components/tabs/index.vue'
import { formatDate } from '@const/filter'
import OperateRecordDialog from '@/moduleComponents/beforeSettle/distributorSide/salesManagement/operateRecordDialog'
import { tabArr, SEARCH_FORM, ORDER_COLUMNS } from './const.js'
import { isObject, cloneDeep, hasIn } from 'lodash'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import {
  wholesaleOrderList,
  distributorWscSaleOrderList,
  distributorWscSaleOrderSalesOrderExport,
  distributorWscStatistics
} from '@const/beforeSettleApi'
import { $loadFileSimply } from '@const/loadFileOps' // 下载文件的方法
import { fileDownload } from '@const/utils'
export default {
  name: 'SaleList',
  components: { tabs, ElEditable, SearchForm, OperateRecordDialog },
  data () {
    return {
      submitLoading: false,
      wholesaleOrderSearchForm: SEARCH_FORM, // 查询条件
      tabArr,
      currrentTabOrderStatus: 1,
      // table列表配置信息
      tableLoading: false,
      wholesaleOrderList: [],
      wholesaleOrderColumns: ORDER_COLUMNS, // table列表表头
      curPage: 1,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0,
      ind: 1,
      exportLoading: false,
      searchData: {}
    }
  },
  computed: {
    compactSearchForm () {
      return this.wholesaleOrderSearchForm.slice(0, 2)
    }
  },
  created () {
    // this.tabArr[this.tabArr.length - 1].badge.value = null
    this.tabArr.forEach(item => {
      item.badge.value = null
    })
  },
  mounted () {
    this.getWholesaleOrderList()
    this.getOrderStatusAmount()
  },
  methods: {
    // 调用search方法
    exportExcelButton (name) {
      this.$refs.wholesaleOrderSearchForm.search(name)
      this.exportExcel()
    },
    // 导出表格
    exportExcel (params) {
      this.exportLoading = true
      let timeStr = formatDate(new Date(), 'YYYYMMDD-HH:mm:ss')
      let filename = `订单对照关系表${timeStr}.xlsx`
      const data = {
        orderType: 1,
        orderStatus: this.ind,
        ...this.searchData
      }
      const reqData = {
        url: distributorWscSaleOrderSalesOrderExport,
        data,
        method: 'post',
        timeout: 300000
      }
      $loadFileSimply(reqData)
        .then(res => {
          // 文件流
          fileDownload(res, filename)
        })
        .finally(() => {
          this.exportLoading = false
        })
    },
    handleTabChange (index) {
      this.ind = tabArr[index].val
      // console.log(this.ind);
      this.currrentTabOrderStatus = this.tabArr[index].val
      this.getWholesaleOrderList()
    },
    getOrderStatusAmount () {
      // 获取订单tab状态数量
      this.$axios({
        method: 'post',
        url: distributorWscStatistics,
        data: {
          orderType: 1
        }
      }).then(res => {
        let arr = hasIn(res, 'data.payload') ? res.data.payload : []
        if (!arr.length) {
          return
        }
        this.tabArr.forEach(item => {
          arr.forEach(ite => {
            if (ite.statusCode === item.val) {
              item.badge.value = ite.count
            }
            if (item.val === 0) {
              item.badge.value += ite.count
            }
          })
        })
      })
    },

    getWholesaleOrderList (params) {
      // console.log(params)
      this.submitLoading = true
      this.tableLoading = true
      this.$axios
        .post(distributorWscSaleOrderList, {
          page: this.curPage,
          pageSize: this.pageSize,
          orderType: 1,
          orderStatus: this.ind,
          ...params
        })
        .then(({ data }) => {
          if (Number(data.code) !== 0) return
          this.wholesaleOrderList = hasIn(data, ['payload', 'content'])
            ? data.payload.content
            : []
          this.totalElements = data.payload.totalElements
        })
        .catch(e => {})
        .finally(() => {
          this.tableLoading = false
          this.submitLoading = false
        })
    },
    handleOperateRecord (row) {
      // 操作记录弹窗本次版本不做
      this.operateRecordDialogVisible = true
    },
    handleSelectionChange (data) {
      this.selectedData = data
    },
    searchForm (condition) {
      this.searchData = condition
      this.getWholesaleOrderList(condition)
    },
    resetForm (condition) {
      this.curPage = 1
      this.searchData = condition
      this.getWholesaleOrderList(condition)
    },
    goDeliverGoods (row) {
      const path =
        '/distributorSide/newSalesManagement/salesOrderTracking/wholesaleOrder/deliveroods'
      const query = {
        id: row.saleOrderId
      }
      this.$router.push({ path, query })
    },
    goResponse (row) {
      const path =
        '/distributorSide/newSalesManagement/salesOrderTracking/wholesaleOrder/response'
      const query = {
        saleOrderId: row.saleOrderId,
        orderStatus: row.orderStatus
      }
      this.$router.push({ path, query })
    },
    acceptAgain (row) {
      const path =
        '/distributorSide/newSalesManagement/salesOrderTracking/wholesaleOrder/acceptAgain'
      const query = {
        id: row.saleOrderId
      }
      this.$router.push({ path, query })
    },
    jumpDetailPage (row) {
      const path =
        '/distributorSide/newSalesManagement/salesOrderTracking/wholesaleOrder/newDetail'
      const query = {
        saleOrderId: row.saleOrderId,
        orderStatus: row.orderStatus
      }
      this.$router.push({ path, query })
    },
    handleSizeChange (size) {
      this.curPage = 1
      this.pageSize = size
      this.getWholesaleOrderList()
    },
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getWholesaleOrderList()
    }
  }
}
</script>

<style lang="less">
.sale-list {
  .header-search {
    .custom-search-form .filter-box .el-form-item__label {
      margin-right: 10px;
      white-space: nowrap;
    }
  }

  .container-box {
    height: 100%;
    overflow: auto;
    .custom-tabs-box {
      margin-top: 12px;
    }
    .btn-box {
      margin: 12px;
    }

    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
}
</style>
